<template>
  <div class="widgetConfigForm">
    <el-form label-position="top">
      <el-form-item label="大屏标题">
        <el-input v-model="config.title" />
      </el-form-item>
      <el-form-item label="大屏尺寸">
        <el-row>
          <el-col :span="2">
            <span>宽</span>
          </el-col>
          <el-col :span="10">
            <el-input v-model="w" min="1000" mini type="number" />
          </el-col>
          <el-col :span="2">
            <span>高</span>
          </el-col>
          <el-col :span="10">
            <el-input v-model="h" min="500" mini type="number" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="缩放方式">
        <el-select v-model="s" placeholder="请选择">
          <el-option v-for="item in scaleWayOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="生成页面快照">
        <el-button type="text" @click="capture()">生成图片</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      w: this.$store.state.screen.screenOptions.style.width,
      h: this.$store.state.screen.screenOptions.style.height,
      s: this.$store.state.screen.screenOptions.scaleWay,
      scaleWayOptions: [
        {
          value: 1,
          label: '全屏等比缩放（大屏/PC）'
        },
        {
          value: 2,
          label: '按高度适配（横向滚动）'
        },
        {
          value: 3,
          label: '按宽度适配（移动端）'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      config: state => state.screen.screenOptions,
      pageStyle: state => state.screen.screenOptions.style
    }),
    styles() {
      return {
        top: this.pageStyle.top + 'px',
        left: this.pageStyle.left + 'px',
        transform: 'scale(' + this.pageStyle.transform + ')',
        height: this.pageStyle.height + 'px',
        width: this.pageStyle.width + 'px'
      }
    }
  },
  watch: {
    w(v) {
      this._updateScreenOptions({ key: 'w', value: v })
    },
    h(v) {
      this._updateScreenOptions({ key: 'h', value: v })
    },
    s(v) {
      this._updateScreenOptions({ key: 's', value: v })
    }
  },
  methods: {
    capture() {
      this.$emit('capture')
    },
    formatTooltip(val) {
      return val / 100
    },
    ...mapMutations({
      _updateScreenOptions: 'screen/_updateScreenOptions'
    })
  }
}
</script>
<style scoped>
.widgetConfigForm::before {
  content: '';
  position: absolute;
  right: 54px;
  top: -8px;
  border-left: 10px solid transparent;
  border-bottom: 14px solid rgb(32, 32, 32);
  border-right: 10px solid transparent;
}
.widgetConfigForm >>> .el-form-item__label {
  color: #ffffff !important;
}
.widgetConfigForm >>> label {
  font-weight: 100;
}
</style>
